<template>
    <div class="share">
        <dl>
            <dd v-for="(item, index) in btnlist" :class="btnactive == index ? 'active' : ''"
                @click="changeindex(item, index)" :key="index">
                <div class="dd-item">
                    <div>
                        <img v-if="btnactive != index" :src="item.img" alt="" />
                        <img v-else :src="item.imgactive" alt="" />
                    </div>
                    <span>{{
                $t(item.lang)
            }}</span>
                </div>
            </dd>
        </dl>
        <Transition name="slide-right"  mode="out-in">
            <component :is="iscomponent" :loading="loading" />
        </Transition>

    </div>
</template>

<script setup lang="ts">

import { reactive, markRaw, nextTick, onMounted, defineAsyncComponent, shallowRef, ref } from "vue";
let myinfo = markRaw(defineAsyncComponent(() => import("./Share/components/myinfo.vue")));
let detail = markRaw(defineAsyncComponent(() => import("./Share/components/detail.vue")));
let tables = markRaw(defineAsyncComponent(() => import("./Share/components/table.vue")));
let totor = markRaw(defineAsyncComponent(() => import("./Share/components/tutor.vue")));
let leader = markRaw(defineAsyncComponent(() => import("./Share/components/leader.vue")));
let guide = markRaw(defineAsyncComponent(() => import("./Share/components/guide.vue")));
let btnactive = shallowRef<number>(0);
let iscomponent = ref(myinfo);
let loading = shallowRef<boolean>(true);
onMounted(() => {
    nextTick(() => {
        // loading.value = false;
        let time = setInterval(() => {
            loading.value = false;
            clearInterval(time);
        }, 500);
    });
});


let changeindex = (item: any, index: number) => {
    btnactive.value = index;
    iscomponent.value = item.component;
};
let btnlist = reactive<{
    lang: string,
    img: string,
    imgactive: string,
    component: any
}[]>([
    {
        lang: "language.Share.btn1",
        img: "/img/re1.png",
        imgactive: "/img/re1l.png",
        component: myinfo,
    },
    {
        lang: "language.Share.btn2",
        img: "/img/re2.png",
        imgactive: "/img/re2l.png",
        component: totor,
    },
    {
        lang: "language.Share.btn3",
        img: "/img/re3.png",
        imgactive: "/img/re3l.png",
        component: detail,
    },
    {
        lang: "language.Share.btn4",
        img: "/img/re4.png",
        imgactive: "/img/re4l.png",
        component: tables,
    },
    {
        lang: "language.Share.btn5",
        img: "/img/re5.png",
        imgactive: "/img/re5l.png",
        component: leader,
    },
    {
        lang: "language.Share.btn6",
        img: "/img/re6.png",
        imgactive: "/img/re6l.png",
        component: guide,
    },
]);
</script>

<style scoped lang="scss">
.share {
    width: 100%;
    height: 100%;

    dl {
        overflow-x: scroll;
        width: 100%;
        margin-bottom: 50px;

        &::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        @include flex(row, space-between, center);
        flex-wrap: nowrap;

        .active {
            background: #0a906c;


            .dd-item {
                background-color: rgb(28, 31, 33);

                >div {
                    background: #0a906c;
                }

                span {
                    font-weight: bold;
                }
            }
        }

        dd {
            height: 142px;
            width: 15.5%;
            border-radius: 20px;
            @include flex(column, flex-start, center);
            background-color: rgb(75, 77, 84);
            padding: 3px 4px 8px;
            cursor: pointer;

            .dd-item {
                width: 100%;
                height: 100%;
                background-color: rgb(36, 38, 43);
                @include flex(column, flex-start, center);
                border-radius: 20px;
                padding-top: 6px;

                >div {
                    width: 82px;
                    height: 82px;
                    border: 2px solid #0a906c;
                    border-radius: 41px;
                    @include flex(column, center, center);

                    img {
                        height: 40px;

                    }
                }

                >span {
                    width: 100%;
                    display: block;
                    white-space: nowrap;
                }




            }






            span {
                width: 100px;
                display: block;
                color: #0a906c;
                font-size: 13px;
                padding-top: 10px;
                white-space: wrap;
                text-align: center;
            }
        }
    }
}
</style>